<template>
  <div class="table-view">
    <VTable v-bind="tableOptins">
      <template #toolbar_btns></template>
    </VTable>
    <SampleDetection ref="detectionRef"></SampleDetection>
  </div>
</template>

<script setup lang="jsx" name="Sample">
import SampleDetection from "../../SampleDetection.vue"
import { getSampleList } from "../api"
let formData = reactive(inject("form"))
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
})
const detectionRef = ref()
const tableOptins = reactive({
  formConfig: {
    data: {
      goods_spu: formData.value.spu,
    },
  },
  height: 500,
  rowConfig: {
    height: 100,
  },
  columns: [
    {
      title: "样品单信息",
      width: 200,
      showOverflow: "title",
      slots: {
        default: ({ row }) => {
          return (
            <div class="flex flex-col">
              <div>单号:{row.sample_order_num}</div>
              <div>状态:{row.status_text}</div>
              <div>类型:{row.sample_type_text}</div>
            </div>
          )
        },
      },
    },
    {
      title: "采购单信息",
      width: 200,
      showOverflow: "title",
      slots: {
        default: ({ row }) => {
          return (
            <div class="flex flex-col">
              <div>单号:{row.purchase_order_num}</div>
              <div>状态:{row.purchase_orders_status}</div>
              <div>供应商:{row.supplier_name}</div>
            </div>
          )
        },
      },
    },
    {
      title: "产品信息",
      width: 200,
      showOverflow: "title",
      slots: {
        default: ({ row }) => {
          return (
            <div class="flex flex-col">
              {row.sampleSkus.map((item) => {
                return (
                  <div class="border text-xs mb-1 p-1 rounded relative">
                    {item.purchase_quantity ? <div class="absolute bg-slate-300 top-0 right-0 px-1 rounded-sm">*{item.purchase_quantity}</div> : ""}
                    <div>SKU:{item.goods_sku}</div>
                    <div>自定义:{item.custom_sku}</div>
                  </div>
                )
              })}
            </div>
          )
        },
      },
    },
    {
      title: "样品费用",
      showOverflow: "title",
      width: 100,
      slots: {
        default: ({ row }) => {
          return (
            <div class="flex flex-col">
              <div>￥{row.total_amount}</div>
              <div class="text-xs text-gray-400">
                <div>商品￥{row.total_goods_cost}+ 运费</div>
                <div>
                  ￥{row.freight}+其他￥{row.other_fee}
                </div>
              </div>
            </div>
          )
        },
      },
    },
    {
      title: "样品检测信息",
      width: 150,
      showOverflow: "title",
      slots: {
        default: ({ row }) => {
          return (
            <div class="flex flex-col">
              <div>
                {row.Inspection_results == 0 ? (
                  <span>待检测</span>
                ) : row.Inspection_results == 1 ? (
                  <span class="flex items-center">
                    <svg-icon class="mr-1 inline-block" icon-class="state_finish_enable" />
                    <span>全部通过</span>
                    <el-button class="ml-1" link type="primary" onclick={() => check(row)}>
                      查看
                    </el-button>{" "}
                  </span>
                ) : row.Inspection_results == 2 ? (
                  <span class="flex items-center">
                    <svg-icon class="mr-1 inline-block" icon-class="state_finish_enable" />
                    <span>部分通过</span>
                    <el-button class="ml-1" link type="primary" onclick={() => check(row)}>
                      查看
                    </el-button>{" "}
                  </span>
                ) : (
                  <span>
                    <svg-icon class="mr-1 inline-block" icon-class="state_finish_cover" />
                    <span>全部不通过</span>
                    <el-button class="ml-1" link type="primary" onclick={() => check(row)}>
                      查看
                    </el-button>
                  </span>
                )}
              </div>
              <div class="line2">{row.problem_points}</div>
            </div>
          )
        },
      },
    },
    {
      title: "人员信息",
      width: 200,
      showOverflow: "title",
      slots: {
        default: ({ row }) => {
          return (
            <div class="flex flex-col">
              <div>
                建单:{row.create_user_text}
                {row.create_time}
              </div>
              <div>
                采购:{row.purchaser_user}
                {row.purchaser_time}
              </div>
              <div>
                检测:{row.testing_personnel_text}
                {row.detection_time}
              </div>
              <div>
                修改:{row.update_user_text}
                {row.update_time}
              </div>
            </div>
          )
        },
      },
    },
  ],
  proxyConfig: {
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: async ({ page, form }) => {
        const res = await getSampleList({ ...form, ...page })
        const totalItem = res.data.status.find((i) => i.status === activeName.value)
        return new Promise(function (resolve) {
          resolve({
            data: res.data.list,
            total: totalItem?.count,
          })
        })
      },
    },
  },
})
const check = (row) => {
  nextTick(() => {
    detectionRef.value.open(row.sampleSkus)
  })
}
</script>

<style lang="scss" scoped>
.table-view {
  :deep(.vxe-grid--toolbar-wrapper) {
    display: none;
  }
  :deep(.vx-table__content) {
    padding: 0;
  }
}
</style>
